<template>
  <div>
    <div id="main1">
      Java学历分布图
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  name: "bingtu",
  mounted() {
    var myChart1 = echarts.init(document.getElementById('main1'));

      fetch("http://127.0.0.1:5000/getjavabingtu").then((e) => {
        return e.json()
      }).then((e) => {
        // 绘制饼状图
        myChart1.setOption(
            {
              title: {
                text: '学历分布',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: e,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
        )

      })



  }
}
</script>

<style scoped>
 #main1 {
  width: 100%;
  height: 400px;
}
</style>